<script setup lang="ts">
import { computed } from "vue";
import { numberToChinese } from "@wenqian/nf-ui";

const colorPalette = [
  "#f2b825",
  "#f16059",
  "#00adef",
  "#3eb54a",
  "#9a59b5",
  "#1e51a4",
];
interface IPieChartData {
  name: string;
  value: number;
}
const props = withDefaults(defineProps<{ data: IPieChartData[] }>(), {
  data: () => [
    { name: "负面", value: 22 },
    { name: "正面", value: 42 },
    { name: "中立", value: 12 },
  ],
});
const options = computed(() => {
  return {
    tooltip: {
      show: true,
      backgroundColor: "#fff",
      textStyle: {
        color: "#707070",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["55%", "72%"],
        left: "center",
        top: "center",
        width: "100%",
        height: "90%",
        startAngle: 0,
        label: {
          distanceToLabelLine: -30,
          // formatter: ["{a|这段文本采用样式a}", "{b|这段文本采用样式b}"].join("\n"),
          rich: {
            a: {
              lineHeight: 20,
            },
            b: {
              color: "#8d9db6",
              lineHeight: 20,
            },
          },
        },
        labelLine: {
          length: 20,
          length2: 40,
        },
        data: props.data.map((item, index) => {
          return {
            ...item,
            label: {
              align: "left",
              position: "outside",
              formatter: (params: any) =>
                `{a|${params.name}}\n{b|${params.percent}%}`,
              rich: { a: { align: "left" }, b: { align: "left" } },
              color:
                index < colorPalette.length - 1
                  ? colorPalette[index]
                  : colorPalette[colorPalette.length - 1],
            },
          };
        }),
      },
      {
        name: "总数: ",
        type: "pie",
        radius: ["0%", "0%"],
        itemStyle: {
          // 防止鼠标悬浮到标签时出现放大的点
          color: "transparent",
        },
        label: {
          position: "inside",
          formatter: `{serie|{a}}{data|{c}}`,
          rich: {
            data: {
              fontSize: 14,
              color: `#8d9db6`,
              lineHeight: 68,
              textBorderColor: `transparent`,
              textBorderWidth: 0,
            },
            serie: {
              fontSize: 14,
              color: `#8d9db6`,
              lineHeight: 28,
              textBorderColor: `transparent`,
              textBorderWidth: 0,
            },
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          // 计算表格数据value总和
          numberToChinese(props.data.reduce((prev, cur) => prev + cur.value, 0))
            .full,
        ],
      },
    ],
  };
});
</script>

<template>
  <div class="chart">
    <nf-charts :options="options" />
  </div>
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 300px;
}
</style>
